<template>
  <view class="page">
    <view class="top">
      <view class="background"></view>
    </view>
    <view class="user-card">
      <view class="card">
        <view class="top">
          <view class="userImage">
<!-- 						<u--form
							labelPosition="left"
							labelWidth="200rpx"
							:model="userInfo"
							ref="form1"
							v-if="upload_photo == true "
						>
							<u-form-item >
								<u-upload 
										:fileList="photo"
										:deletable="false"
										@afterRead="afterRead"
										@delete="deletePic"
										name="photo"
										multiple
										maxCount="1"
										height="height: 100%;"
									>
									<image :src="photo" style="max-height: 100%;"></image>
								</u-upload>
							</u-form-item>
						</u--form>
						<image :src="photo" style="max-height: 100%;" mode="aspectFill" v-if="upload_photo == false "></image> -->
					
						<cropper v-if="upload_photo == true" selWidth="550rpx" selHeight="770rpx" canScale="true" quality="1" @upload="photoUpload" :avatarSrc="photo" avatarStyle="width:150rpx;height:170rpx">					</cropper>
						<image :src="photo" style="max-height: 100%;" mode="aspectFill" v-if="upload_photo == false "></image> 
						
					</view>
        </view>
        <view class="bottom">
          <view class="left">
            <view class="user-text" v-if="username != ''">
				{{ username }}
            </view>
            <view class="user-phone"> {{mobile}} </view>
          </view>
          <view class="right flex-center" style="display:block;width:38%" v-if=" status_text != ''">
			<view class="label" style="margin-top:17rpx;width: 60%;">{{status_text}}</view>
			<view class="" style="margin-top:36rpx;color: #96a1ae;font-size: 0.9em;"  v-if=" sign_time_text != ''">入职日期:{{sign_time_text}}</view>	
          </view>
        </view>
      </view>
    </view>
    <view class="list-card" v-if=" mobile != '' ">
      <view class="card" @click="linkMy('/pages/index/info-form')">
        <view class="item item-bottom-solid">
          <view class="left flex-center">
            <image src="../../static/image/myIcon/qiu.png" mode="aspectFit"></image>
          </view>
          <view class="center">
            <text>个人信息</text>
          </view>
          <view class="right flex-center">
            <u-icon class="icon" name="arrow-right"></u-icon>
          </view>
        </view>
      </view>
	  <view class="card" @click="linkMy('/pages/sign/my-trial-job')" v-if=" sign_time != null && is_old_staff == 0">
	    <view class="item item-bottom-solid">
	      <view class="left flex-center">
	        <image src="/static/image/icon/icon_contract.png" mode="aspectFit"></image>
	      </view>
	      <view class="center">
	        <text>试岗协议</text>
	      </view>
	      <view class="right flex-center">
	        <u-icon class="icon" name="arrow-right"></u-icon>
	      </view>
	    </view>
	  </view>
	  <view class="card" @click="linkMy('/pages/index/uploadPic')" v-if=" attach_time != null">
	    <view class="item item-bottom-solid">
	      <view class="left flex-center">
	        <image src="/static/image/icon/icon_attach.png" mode="aspectFit"></image>
	      </view>
	      <view class="center">
	        <text>附件信息</text>
	      </view>
	      <view class="right flex-center">
	        <u-icon class="icon" name="arrow-right"></u-icon>
	      </view>
	    </view>
	  </view>
	  <view class="card" @click="linkMy('/pages/index/promotion-apply-record')" v-if= "contract_status == 'FINISH'">
	    <view class="item item-bottom-solid">
	      <view class="left flex-center">
	        <image src="/static/image/icon/upgrade.png" mode="aspectFit"></image>
	      </view>
	      <view class="center">
	        <text>晋升申请</text>
	      </view>
	      <view class="right flex-center">
	        <u-icon class="icon" name="arrow-right"></u-icon>
	      </view>
	    </view>
	  </view>
 	  <view class="card" @click="linkMy('/pages/index/staff-list')" v-if=" is_personnel_matters == 1 && contract_status == 'FINISH'">
	    <view class="item item-bottom-solid">
	      <view class="left flex-center">
	        <image src="/static/image/icon/staff.png" mode="aspectFit"></image>
	      </view>
	      <view class="center">
	        <text>员工列表</text>
	      </view>
	      <view class="right flex-center">
	        <u-icon class="icon" name="arrow-right"></u-icon>
	      </view>
	    </view>
	  </view> 
 	  <view class="card" @click="linkMy('/pages/index/attendance-info')" v-if= "contract_status == 'FINISH'">
	    <view class="item item-bottom-solid">
	      <view class="left flex-center">
	        <image src="/static/image/icon/attendance.png" mode="aspectFit"></image>
	      </view>
	      <view class="center">
	        <text>考勤信息</text>
	      </view>
	      <view class="right flex-center">
	        <u-icon class="icon" name="arrow-right"></u-icon>
	      </view>
	    </view>
	  </view>
<!-- 	  <view class="card" @click="linkMy('/pages/index/bank-info')" v-if= " contract_status == 'FINISH' "> -->
	<view class="card" @click="linkMy('/pages/index/bank-info')" v-if= " contract_status == 'FINISH' && card_no != '' ">
	    <view class="item item-bottom-solid">
	      <view class="left flex-center">
	        <image src="/static/image/icon/card.png" mode="aspectFit"></image>
	      </view>
	      <view class="center">
	        <text>银行卡</text>
	      </view>
	      <view class="right flex-center">
	        <u-icon class="icon" name="arrow-right"></u-icon>
	      </view>
	    </view>
	  </view> 
    </view>
     <view class="quit flex-center" v-if=" mobile == '' " >
        <view class="btn flex-center" @click="bind('/pages/index/my')">
          登录
        </view>
     </view>
	 <telTest ref="telTest" @close="telClose()"></telTest>
	 <zero-loading v-if="loading == true" type="gear" mask="true" maskOpacity="0.3"></zero-loading>
	 <yfx-tooltip ref="tooltip"></yfx-tooltip>
	 
  </view>
</template>
<style lang="scss" scoped>
	.label{
		//width:150rpx;
		//position: absolute;
		left:15rpx;
		font-size:20rpx;
		bottom:30rpx;
		border-radius: 8rpx;
		color:#fff;
		background-color: #5199ff;
		text-align: center;
		line-height: 34rpx;
		height: 34rpx;
		padding : 0 10rpx 0 10rpx;
	}
.top {
  height: 250rpx;
  position: relative;
  .background {
    background-color: #5199ff;
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
    position: absolute;
    height: 180rpx;
    width: 100%;
  }
}
.icon {
  color: #96a1ae;
  font-size: 40rpx;
}
.user-card {
  height: 170rpx;
  padding: 0 15px;
  .card {
    position: relative;
    bottom: 62px;
    height: 250rpx;
    background-color: white;
    border-radius: 5px;
    .top {
      height: 30%;
      position: relative;
      .userImage {
        position: absolute;
        bottom: 24%;
        left: 10%;
        width: 150rpx;
        height: 150rpx;
        overflow: hidden;
        border-radius: 50%;
        // border: 2px solid white;
				
				::v-deep .u-form-item__body{
					padding: 0;
					image{
						width: 150rpx;
						height: 150rpx;
					}
				}
				
				button{
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 100%;
					opacity: 0;
				}
      }
    }
    .bottom {
      display: flex;
      height: 70%;
      .left {
        width: 38%;
        height: 100%;
        position: relative;
        .user-text {
          width: 100%;
          font-size: 1.6em;
          padding-left: 80rpx;
          height: 50%;
        }
        .user-phone {
          color: #96a1ae;
          padding-left: 80rpx;
          height: 50%;
          width: 100%;
          font-size: 0.9em;
        }
      }
      .right {
        width: 23%;
        height: 37%;
      }
    }
  }
}
.list-card {
  padding: 0 15px;
  .card {
    border-radius: 5px;
    position: relative;
    background-color: white;
    border-radius: 5px;
    padding: 5px 30px;
    .item {
      display: flex;
      height: 120rpx;
      .left {
        width: 15%;
        image {
          width: 70rpx;
          height: 70rpx;
        }
      }
      .center {
        width: 65%;
        display: flex;
        justify-content: start;
        align-items: center;
        font-size: 1.1em;
      }
      .right {
        width: 20%;
        justify-content: flex-end;
      }
    }
  }
}
.item-bottom-solid {
  border-bottom: 1px solid #d4d6da;
}
.quit{
  height: 100rpx;
  margin-top: 50px;
  .btn{
    background-color: #4f99ff;
    border-radius: 30px;
    width: 80%;
    color: white;
    font-size: 1.2em;
    height: 100%;
  }
}
.flex-center{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
 
<script>
//import {  } from "@/common/api/{$}.js";
	import telTest from'@/components/ben-components/tel/tel-test.vue'
	import cropper from "@/components/lxiaoxiao-cropper/lxiaoxiao-cropper.vue";

export default {
	onShareAppMessage() {
		return {
			title: '小微入职助手',//分享标题
			// path: 'xxx', // 可选，如果希望点击进去是小程序的某个页面
			imageUrl: '', // 分享图片地址
			success: function(res) {
	
			},
			fail: function(err) {
	
			}
		};
	},
	components: {
		telTest,
		cropper
	},
  data() {
    return {
		userInfo:{
			photo   : [],
		},
		upBaseUrl:this.$http.baseUrl,
	
		loading  : false,
		username : '请先登录',
		mobile   : '',
		photo    : '../../static/image/icon_avatar.png',
		upload_photo : false,
		status_text : '',
		contract_status : '',
		position_id : 0,
		is_old_staff: 0,
		is_personnel_matters : 0,
		sign_time   : null,
		attach_time : null,
		sign_time_text:'',
		card_no       :''
	};
  },
  //监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad
  onInit() {
	   this.getUserInfo();	
  },
  //监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
  onLoad() {
	// this.userLogin();
  },
  //监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  //监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
  onShow() {
	  this.$refs.telTest.close();
	   this.getUserInfo();	
  },
  //页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。
  onReachBottom() {},
  onShareAppMessage(res) {},
  created() {},
  methods: {
	  telClose(){
		  this.getUserInfo();
	  },
	  linkMy(url){
	  	var that = this;
	  	if (uni.getStorageSync('token') && 　uni.getStorageSync('mobile')) {
			if( this.contract_status == 'LEAVE'){
				this.$refs.tooltip.open({
					msg: '提示',//标题
					content: '你已离职,操作失败!',//提示内容
					showCancel: false//不显示取消按钮
				})
			}else{
				uni.navigateTo({
					url
				})
			}
	  	
	  	} else {
	  		if(!uni.getStorageSync('token')){
	  			var code = '';
	  			uni.login({
	  				provider: 'weixin',
	  				success: function(logRes) {
	  					code = logRes.code;
	  				}
	  			});
	  			// 获取code
	  			
	  			uni.getUserProfile({
	  				desc: '作为展示',
	  				success: res => {
	  					let param = {
	  						code: code,
	  						iv: res.iv,
	  						encryptedData: res.encryptedData,
	  						rawData: res.rawData,
	  						signature: res.signature,
	  						nickname: res.userInfo.nickName,
	  						avatar: res.userInfo.avatarUrl,
	  					};
	  					that.$http.authorization(param).then(res => {
	  						uni.hideToast();
	  						if (res.code == 1) {
	  							uni.setStorageSync('token', res.data.token);
	  							uni.setStorageSync('mobile',res.data.mobile?res.data.mobile:'')
	  							
								console.log(this.contract_status);
								if( this.contract_status == 'LEAVE'){
									this.$refs.tooltip.open({
										msg: '提示',//标题
										content: '你已离职,操作失败!',//提示内容
										showCancel: false//不显示取消按钮
									})
								}else{
									if(uni.getStorageSync('mobile')){
										this.mobile=uni.getStorageSync('mobile')
										uni.navigateTo({
											url
										})
									} else {
										this.$refs.telTest.open(url)
									}
								}
	  						
	  							
	  						}
	  					});
	  				},
	  				fail: err => {
	  					console.log('获取失败', err);
	  				}
	  			});
	  		} else{
	  			this.$refs.telTest.open(url)
	  		}
	  		
	  	}
	  	
	  },
	  bind(url){
		  this.loading = true;
		  var that = this;
		  if (uni.getStorageSync('token') && 　uni.getStorageSync('mobile')) {
			this.getUserInfo()
			this.loading = false;
		  } else {
		  	if(!uni.getStorageSync('token')){
		  		var code = '';
		  		uni.login({
		  			provider: 'weixin',
		  			success: function(logRes) {
		  				code = logRes.code;
		  			}
		  		});
		  		// 获取code
		  		
		  		uni.getUserProfile({
		  			desc: '作为展示',
		  			success: res => {
		  				let param = {
		  					code: code,
		  					iv: res.iv,
		  					encryptedData: res.encryptedData,
		  					rawData: res.rawData,
		  					signature: res.signature,
		  					nickname: res.userInfo.nickName,
		  					avatar: res.userInfo.avatarUrl,
		  				};
		  				that.$http.authorization(param).then(res => {
		  					uni.hideToast();
							this.loading = false;
		  					if (res.code == 1) {
		  						uni.setStorageSync('token', res.data.token);
		  						uni.setStorageSync('mobile',res.data.mobile?res.data.mobile:'')
		  						
		  						if(uni.getStorageSync('mobile')){
		  							this.mobile=uni.getStorageSync('mobile')
		  							this.getUserInfo();
		  						} else {
		  							this.$refs.telTest.open(url);
									//this.getUserInfo();
		  						}
		  						
		  					}
		  				});
		  			},
		  			fail: err => {
						this.loading = false;
		  				console.log('获取失败', err);
		  			}
		  		});
		  	} else{
				this.loading = false;
		  		this.$refs.telTest.open(url);
				//this.getUserInfo();
		  	}
		  	
		  }
		//this.$refs.telTest.open()  
	  },
	  getMobile(){
	  	this.getUserInfo();
	  },
	  
	  getUserInfo() {
	  	let param = {};
	  	this.$http.getUser(param).then(res => {
	  		if (res.code == 1 && res.data) {
				this.username    = res.data.c_name;
				this.mobile      = res.data.mobile;
				this.status_text = res.data.status_text;
				this.contract_status = res.data.status;
				this.sign_time    = res.data.sign_time;
				this.attach_time  = res.data.attach_time;
				this.position_id  = res.data.position_id;
				this.is_old_staff = res.data.is_old_staff;
				this.is_personnel_matters = res.data.is_personnel_matters;
				this.sign_time_text = res.data.sign_time_text;
				this.card_no    = res.data.bank_card_no;
				
				if( res.data.photo.length > 0 ) {
					this.upload_photo = false;
					this.photo  = res.data.photo[0].url;
				}else{
					if( res.data.avatar_examine == true){
						this.photo = '../../static/image/icon_avatar_examine.png';
					}else{
						this.photo = '../../static/image/icon_avatar.png';
					}
					this.upload_photo = true;
				}
				
				
	  		}else{
				uni.removeStorageSync('mobile');
				this.contract_status   =  '';
				this.status_text        =  '';
				this.username    	   =  '请先登录';
				this.mobile    		   =  '';
				this.attach_time       =  null;
				this.sign_time         =  null;
				this.is_old_staff 	   = 0;
				this.is_personnel_matters = 0;
			}
	  	});
	  },
	  // 新增图片
	        async afterRead(event) {
	          // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
	          let lists = [].concat(event.file)
	          let fileListLen = this.userInfo[`${event.name}`].length
	          lists.map((item) => {
	            this.userInfo[`${event.name}`].push({
	              ...item,
	              status: 'uploading',
	              message: '上传中'
	            })
	          })
	          for (let i = 0; i < lists.length; i++) {
	            const result = await this.uploadFilePromise(lists[i].url)
	            
	            let item = this.userInfo[`${event.name}`][fileListLen]
	            this.userInfo[`${event.name}`].splice(fileListLen, 1, Object.assign(item, {
	              status: 'success',
	              message: '',
	              url    :result
	            }))
	            fileListLen++;
	          }
	  
	        },
	  	uploadFilePromise(url) {			
	  		return new Promise((resolve, reject) => {
				console.log(url);
				
	  			let a = uni.uploadFile({
	  				url: this.upBaseUrl + 'common/uploadImg',
	  				filePath: url,
	  				name: 'file',
	  				header: {
	  					'TOKEN': uni.getStorageSync('token')
	  				},
	  				formData: {},
	  				success: (res) => {
	  					let param = {
	  						photo: JSON.parse(res.data).data.full_url,
	  					};
						this.$http.uploadUserPhoto(param).then(res => {
							if (res.code == 1) {
								this.photo = '../../static/image/icon_avatar_examine.png';
								this.$refs.tooltip.open({
									msg: '上传成功',//标题
									content: res.msg,//提示内容
									showCancel: false//不显示取消按钮
								})
							}else{
								this.$refs.tooltip.open({
									msg: '错误',//标题
									content: res.msg,//提示内容
									showCancel: false//不显示取消按钮
								})
							}
						});
						resolve(JSON.parse(res.data).data.full_url)
	  					
	  				}
	  			});
	  		})
	  	},
		
		async photoUpload(rsp) {
			this.loading = true;
			
					  const self = this;
					  const result = await this.uploadFilePromise(rsp.path);
					  console.log(result);
					  let fileListLen = this.userInfo['photo'].length
					  console.log(fileListLen);
					  this.userInfo['photo'] = [{
		            status: 'success',
		            message: '',
		            url    :result
		          }];
		this.loading = false;
		
					  // rsp.avatar.imgSrc = rsp.path; //更新头像方式二
		},
  },
};
</script>
